<template>
  <div>
    <a-button @click="ok" v-show="isShow">点击</a-button>
  </div>
  <div ref="content">
    <a-row justify="center">
      <a-col :xs="{ span: 22 }" :sm="{ span: 21 }" :md="{ span: 19 }" :lg="{ span: 14 }" :xxl="{ span: 12 }">
        <div style="margin-top: 40px; margin-bottom: 10px">
          <div>
            <h2>本卷目由<a href="https://www.dypi.xyz">https://www.dypi.xyz</a>生成。查看本卷答案，请扫描二维码。</h2>
          </div>
          <div>
            <img style="display: inline-block" height="100" src="https://dypi.xyz/static/image/dypi.jpg" alt="刷题网站二维码">
          </div>
        </div>
        <hr>
        <ShowProblem :content="questions" />
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from 'vue'
import { Row, Col, Button } from 'ant-design-vue'
import { getQusForPDF } from '@/service'
import ShowProblemV2 from '@/components/ShowProblemV2.vue'
import { transUrl } from '@/utils/ds'

export default defineComponent({
  name: 'QusPadPdf',
  components: {
    ShowProblem: ShowProblemV2,
    ARow: Row,
    ACol: Col,
    AButton: Button
  },
  setup () {
    const questions = ref<string>('')
    const ids = ref<number[]>([5, 12, 34, 56, 98, 15, 23])
    const ansCode = ref<string>()
    const content = ref<HTMLElement | string>('content')
    const isShow = ref<boolean>(true)
    const getQus = () => {
      getQusForPDF(ids.value)
        .then(response => {
          if (response.status !== 200) {
            return
          }
          const resp = response.data
          if (resp.code !== 0 || resp.data === null) {
            return
          }
          const data = resp.data
          const tmp:string[] = []
          data.forEach((qus:any, idx:number) => {
            const cur = qus.question as string
            const t = `###### ${idx + 1}. ${cur.substring(7)}`
            tmp.push(transUrl(t))
          })
          questions.value = tmp.join('\n')
          console.log(questions.value)
        })
    }

    const ok = () => {
      isShow.value = false
      // window.print()
      // const e = content.value as HTMLElement
      // console.log(e.innerHTML)
    }
    onMounted(() => {
      getQus()
    })
    return {
      content,
      questions,
      ansCode,
      isShow,
      ok
    }
  }
})
</script>

<style scoped>

</style>
